<div class="requirement" *ngIf="requirements">
    <table class="ui fixed celled table">
        <thead>
            <tr>
                <th class="three wide">{{ 'requirement_type' | translate }}</th>
                <th class="ten wide">{{ 'requirement_value' | translate }}</th>
                <th class="three wide"></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let r of getDataForCurrentPage()">
                <td class="border">
                    <div *ngIf="edit;else rType">
                        <div class="ui form">
                            <sui-select class="selection mt5"
                                        *ngIf="availableRequirements.length > 0"
                                        [(ngModel)]="r.type"
                                        (selectedOptionChange)="change(r)"
                                        [isSearchable]="true">
                                <sui-select-option *ngFor="let r of availableRequirements" value="{{r}}">{{r}}</sui-select-option>
                            </sui-select>
                        </div>
                    </div>
                    <ng-template #rType>
                        <span>{{r.type}}</span>
                    </ng-template>
                </td>
                <td class="border">
                    <div *ngIf="r.type === 'service'">
                        <div class="ui fluid" *ngIf="edit;else rName">
                            <label for="requirementname">
                            {{ 'requirement_hostname_service' | translate }}
                        </label>
                            <input name="requirementname" auto-complete autocomplete="off" type="text" [source]="suggest" [min-chars]="3" [(ngModel)]="r.name" (ngModelChange)="change(r)" [no-match-found-text]="false">
                        </div>
                        <ng-template #rName>
                            <span>{{r.name}}</span>
                        </ng-template>
                    </div>

                    <div *ngIf="edit;else rValue">
                        <div *ngIf="r.type !== 'model' && r.type !== 'os-architecture'">
                            <label for="requirementvalue" *ngIf="r.type === 'service'">
                                {{ 'requirement_value_service' | translate }}
                            </label>
                            <input name="requirementvalue" auto-complete autocomplete="off" type="text" [source]="suggest" [min-chars]="3" [(ngModel)]="r.value" (ngModelChange)="change(r)" [no-match-found-text]="false">
                        </div>
                        <div *ngIf="r.type === 'os-architecture'">
                            <input name="value-os-architecture" auto-complete autocomplete="off" type="text" [source]="suggestWithOSArch" [min-chars]="0" [(ngModel)]="r.value" (ngModelChange)="change(r)" [no-match-found-text]="false">
                        </div>
                        <div *ngIf="r.type === 'model' && workerModels">
                            <div class="ui grid">
                                <div class="ui fourteen wide column">
                                        <input name="value-workermodel" auto-complete autocomplete="off" type="text" [source]="suggestWithWorkerModel" [min-chars]="0" [(ngModel)]="r.value" (ngModelChange)="change(r)" [no-match-found-text]="false">
                                </div>
                                <div class="ui two wide column valign">
                                    <span *ngIf="getWorkerModel(r.value)?.nb_spawn_err > 0" [smDirTooltip]="'worker_model_spawn_error_tooltip' | translate" smDirPosition="top center"><i class="exclamation triangle icon large red"></i></span>
                                    <span *ngIf="getWorkerModel(r.value)?.is_official" [smDirTooltip]="'worker_model_official_tooltip' | translate" smDirPosition="top center"><i class="check circle outline icon large green"></i></span>
                                    <span *ngIf="getWorkerModel(r.value)?.is_deprecated" [smDirTooltip]="'worker_model_deprecated_tooltip' | translate" smDirPosition="top center"><i class="exclamation circle icon large orange"></i></span>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="r.type === 'model' || r.type === 'service'">
                            <label for="opts">
                                {{ 'requirement_options' | translate }}
                            </label>
                            <textarea [(ngModel)]="r.opts" (ngModelChange)="change(r)" rows="3" placeholder="{{'requirement_placeholder_opts_' + r.type | translate}}"></textarea>
                        </div>
                    </div>
                    <ng-template #rValue>
                        <span>{{r.value}}</span>
                    </ng-template>

                </td>
                <td class="center border">
                    <ng-container *ngIf="edit">
                        <app-delete-button (event)="deleteEvent(r)"></app-delete-button>
                    </ng-container>
                </td>
            </tr>
        </tbody>
        <tfoot *ngIf="getNbOfPages() > 1">
            <tr>
                <th colspan="3">
                    <div class="ui right floated pagination menu">
                        <a class="icon item" (click)="downPage()">
                            <i class="left chevron icon"></i>
                        </a>
                        <a class="item" *ngFor="let page of getNbOfPages() | ngForNumber" (click)="goTopage(page)" [class.active]="currentPage === page">{{page}}</a>
                        <a class="icon item" (click)="upPage()">
                            <i class="right chevron icon"></i>
                        </a>
                    </div>
                </th>
            </tr>
        </tfoot>
    </table>
</div>
